{include file="admin@public/header" /}

<link rel="stylesheet" href="/public/static/admin/easyui/layui-v2.6.8/css/layui.css">
<link href="/public/static/admin/blue/bills.css" rel="stylesheet" type="text/css">
<div class="wrapper">
  <div class="mod-toolbar-top mr0 cf dn" id="toolTop"></div>
  <div class="bills">
    <div class="con-header">
      <dl class="cf">
        <dd class="mr20">
          <label><span class="red">*</span>供应商：</label>
          <span class="ui-combo-wrap" id="customer">
            <input type="text" name="" class="input-txt" {if condition="$info.status eq 1" } disabled="disabled" {/if}
              value="{$info.customer_name}" autocomplete="off" value="" data-ref="date">
            <i class="ui-icon-ellipsis" onclick="chooseSupplier()"></i></span>
        </dd>



        <dd class="mr20">
          <label>单据日期：</label>
          <input type="date" id="dj_time" class="ui-input" {if condition="$info.status eq 1" } disabled="disabled" {/if}
            value="{$info.dj_time|date='Y-m-d',###}" style="width: 125px;">
        </dd>
        <!-- <dd id="identifier" style="float:right">
          <label>单据编号：</label>
          <span id="number">SKD20210823004</span></dd> -->
        <dd id="identifier" style="float:right">
          <label>单据编号:</label>
          <span id="number">{$info.sn}</span>
          <i id="editBills"></i>
          <span class="ui-combo-wrap" id="numberAuto" style="display: none;">
            <i class="trigger"></i>
          </span>
        </dd>
      </dl>
      <hr class="hrcls" />
      <div class="cf  ">
        <div class="fl">
          <span id="config" class="ui-config"><a href="#" class="ui-icon-config-new"></a>列设置</span>
        </div>

      </div>
    </div>
    <div class="grid-wrap mb10" id="acGridWrap">
      <table id="grid">
      </table>
    </div>
    <div id="standardVersion">


      <div class="cf" id="bottomField">
        <span id="groupBtn">

          <a id="savaAndAdd" class="ui-btn ui-btn-sp">保存并新增</a>
          <a id="save" class="ui-btn">保存</a>
          <a id="shenhe" class="ui-btn">审核</a>
        </span>
      </div>

    </div>

    <div class="con-footer cf">
      <div class="mb10">
        <textarea type="text" id="note" class="ui-input ui-input-ph">{$info.mark}</textarea>
      </div>
      <ul id="amountArea" class="cf">
        <li>
          <label id="paymentTxt">结算账户:</label>
          <input type="text" id="account" class="ui-input" value="0.00">&emsp;
        </li>
        <li>
          <label id="paymentTxt">收款金额:</label>
          <input type="text" id="now_jine" class="ui-input" {if condition="$info.status eq 1" } disabled="disabled"
            {/if} value="{$info.now_jine}" onchange="zk_jine()">&emsp;
        </li>
        <li id="accountWrap">
          <label>本次欠款:</label>
          <input type="text" id="qk_jine" class="ui-input ui-input-dis" {if condition="$info.status eq 1" }
            disabled="disabled" {/if} value="{$info.qk_jine}" disabled>
        </li>
      </ul>

      <div id="mark" {eq name="info.status" value="1" } class="has-audit" {/eq}></div>
      <div class="cf fr">
        <a href="#" class="linkToCheck ui-btn-bill ui-btn-add mr20"
          onclick="addPage('/money/oriexp/index.html','money','其他支出单记录')">历史单据</a>
        <a href="#" id="operaLog" class="ui-btn">操作日志</a>
      </div>
    </div>
    <div class="cf" id="bottomField">
      <div class="fr" id="toolBottom"></div>
    </div>
    <div id="mark"></div>
  </div>

</div>

<!--  以隐藏的方式获取商品的样式 ，作用是样式 -->
<div id="p_income_type" style="display:none;"> </div>

<!--  以隐藏的方式获取商品的样式 ，作用是赋值 -->
<div style="display:none;">
  <input type="text" id="income_type_name" value="" autocomplete="off" readonly="">
  <input type="text" id="user_id" value="" autocomplete="off" readonly="">
  <input type="text" id="jine" value="" autocomplete="off" readonly="">
</div>
<!--收入类别弹窗 -->
<div class="ui-droplist-wrap" id="account_wrap" style="position: absolute; z-index: 1000; width: 182px;display:none;">
  <div class="droplist" id="account_list" style="position: relative; overflow: auto; min-height: 150px; height: 150px;">
    {volist name="income_type" id="vo"}
    <div class="list-item" account_id="{$vo.id}" title="{$vo.name}">{$vo.name}</div>
    {/volist}
  </div>
</div>




<script type="text/javascript">
  var edit_row = 0;
  var edit_col = 0;
  var row_id = 0;
  var col_name = 0;
  $(document).ready(function () {
    $("#grid").jqGrid({
      url: '/money/oriexp/details.html?ajax=100&order_id={$info.id}',
      datatype: "json",//数据来源，本地数据（local，json,jsonp,xml等）
      height: '90%',//高度，表格高度。可为数值、百分比或'auto'
      colNames: ['<span class="red">*</span>收入类别', '<span class="red">*</span>金额', '备注', '收入类别ID'],
      colModel: [
        // { name: '', width: 70,},
        {
          name: "income_type_name",
          width: 180,
          link: "inventory",
          editable: true,
          edittype: "custom",
          editoptions: {
            custom_element: function (t, e) {
              $("#p_income_type").html('<div class="pr" id="income_type"><input type="text" value="' + t + '" class="textbox storageAuto customelement ui-combo-active" autocomplete="off" style="outline: -webkit-focus-ring-color auto 5px;"><span class="ui-icon-triangle-1-s" id="income_type_id1"></span></div>');
              return $("#income_type");
            },
            custom_value: function (t, e, a) {
              var ba = $("#income_type_name").val();
              $("#income_type_name").val("");
              return ba;
            },

            trigger: "ui-icon-triangle-1-s"
          }
        },

        {
          name: 'jine', width: 150, editable: true, editoptions: {
            size: 25,
            dataEvents: [
              {
                type: 'change',     //blur,focus,change............. 
                fn: function (e) {
                  reload_val();
                }
              }
            ]
          }
        },

        { name: 'mark', width: 350, editable: true },
        { name: 'income_type_id', hidden: true },

      ],
      cellEdit: true,
      cellurl: '/',
      sortname: 'id',
      sortorder: "desc",
      rownumbers: true, //自增序号

      altRows: !0,
      gridview: !0,
      shrinkToFit: !1,
      cellLayout: 8,
      autowidth: !0,
      pager: "#page",
      viewrecords: !0,
      cmTemplate: {
        sortable: !1,
        title: !1
      },
      // 合计
      footerrow: true,
      loadError: function (t, e, i) {
        parent.Public.tips({
          type: 1,
          content: "操作失败了哦，请检查您的网络链接！"
        })
      },
      beforeEditCell: function (rowid, cellname, value, iRow, iCol) {
        col_name = cellname;
        edit_row = iRow;
        edit_col = iCol;
        row_id = rowid;
        var aname = $("#grid").jqGrid("getCell", row_id, 'income_type_name');
        $("#income_type_name").val(aname);

      },
      gridComplete: function () {
        // 合计的变量
        var jines = $("#grid").getCol('jine', false, 'sum');
        $("#jine").val(jines);//付款总金额
        $("#now_jine").val(jines);//本次付款
        $("#qk_jine").val(0);//本次欠款
        $("#grid").footerData('set', { "income_type_name": '合计：', jine: jines, });

        var grid = $("#grid");
        var col_hs = grid.getCol('col_h', false);//获取某一列
        var ids = grid.getDataIDs();
        var rowDatas = grid.jqGrid("getRowData");//获取所有行的数据

        var zt = "{$info.status}";
        if (zt == "1") {
          for (var i = 0; i < ids.length; i++) {
            //设置不可编辑
            $("#grid").jqGrid('setCell', ids[i], 'income_type_name', '', 'not-editable-cell');
            $("#grid").jqGrid('setCell', ids[i], 'jine', '', 'not-editable-cell');
            $("#grid").jqGrid('setCell', ids[i], 'mark', '', 'not-editable-cell');
            $("#grid").jqGrid('setCell', ids[i], 'number', '', 'not-editable-cell');
            $("#grid").jqGrid('setCell', ids[i], 'dw', '', 'not-editable-cell');
            $("#grid").jqGrid('setCell', ids[i], 'mark', '', 'not-editable-cell');
          }
        }
      },
    });

    // var mydata = [];
    // for (var i = 0; i < 5; i++) {
    //     var obj = { id: i + 1, account_money: "0",settle_sn:"",mark:""}
    //     mydata.push(obj);
    // }
    // for (var i = 0; i <= mydata.length; i++) {
    //     jQuery("#grid").jqGrid('addRowData', i + 1, mydata[i]);
    // }


  });

</script>
<script type="text/javascript">
  $(document).ready(function () {
    // 选择收入类别-弹窗
    $(".grid-wrap").on("click", "#income_type_id1", function (e) {
      var top = $(this).offset().top;
      var left = $(this).offset().left;
      $("#account_wrap").slideToggle();
      $("#account_wrap").css({ "top": (top + 22) + "px", "left": (left - 158) + "px" });
    })
    //选择收入类别-赋值
    $("#account_wrap #account_list").on("click", ".list-item", function (e) {

      var title = $(this).attr("title");
      //结算账户
      if (col_name == "income_type_name") {
        var account_id = $(this).attr("account_id");
        $("#income_type_name").val(title);
        $("#grid").jqGrid("setCell", row_id, 'income_type_id', account_id);
        $("#grid").jqGrid("setCell", row_id, 'income_type_name', title);//及时保存
        $("#grid").jqGrid("saveCell", edit_row, edit_col);//保存数据表格
      }
      $("#grid").saveRow(row_id, false);
      $("#account_wrap").hide();
    });
  })
  //选择收入类别-选择框外点击则隐藏
  $(document).mouseup(function (e) {
    if (e.target.id != "income_type_id1") {
      var con = $("#account_wrap");   // 设置目标区域
      if (!con.is(e.target) && con.has(e.target).length === 0) {
        $("#account_wrap").hide();
      }
    }
  });



</script>
<script type="text/javascript">
  //选择客户(供应商)
  function chooseSupplier() {
    layer.open({
      type: 2,
      title: "选择供应商",
      shadeClose: true,
      shade: 0.3,
      maxmin: false, //开启最大化最小化按钮
      area: ['600px', '510px'],
      fixed: false, //不固定
      btn: ['确定', '取消'],
      content: "/admin/basic/choose_customer.html?single=0&is_customer=0",//多选，供应商
      btn1: function (index, layero) {
        var body = layer.getChildFrame('body', index);
        //获取所有选中行
        var ids = body.find("#grid").jqGrid('getGridParam', 'selarrrow');

        if (ids == '' || ids == null) {
          layer.msg("请选择供应商");
          return false;
        } else {
          //alert(ids);
          //return false;
          //获取商品信息
          $.get("/admin/basic/one_supplier.html", { ids: ids }, function (data, state) {
            if (data.status == 1) {
              $("#customer input").val(data.info.names);
              $('#user_id').val(data.info.ids);
            } else {
              layer.msg("获取信息失败");
            }
          })
        }
        layer.close(index);
        return false;
      },
      btn4: function (index, layero) {
        layer.close(index);
        return false;
      }
    })
  }
</script>


<script type="text/javascript">

  function reload_val() {
    var rid = row_id;
    var c_name = col_name;
    if (c_name == "jine") {
      // 合计的变量
      var jines = $("#grid").getCol('jine', false, 'sum');//总金额
      $("#jine").val(jines);//付款总金额
      $("#now_jine").val(jines);//本次付款
      $("#qk_jine").val(0);//本次欠款
      $("#grid").footerData('set', { "psn": '合计：', jine: jines });
    }


  }



  //本次付款改变
  function zk_jine() {

    var jines = $("#grid").getCol('jine', false, 'sum');//总金额
    var now_jine = $("#now_jine").val();//本次付款
    var jine = $("#jine").val();//总金额
    $('#qk_jine').val(parseFloat(jine) - parseFloat(now_jine));//总欠款=付款总金额-本次付款
  }
</script>
<script type="text/javascript">
  var grid = $('#grid');
  $(".wrapper").on("click", "#savaAndAdd", function (e) {
    //先保存
    save_jqgrid(edit_row, edit_col, grid, function (res) {
      savedata();
    });
  })

  function savedata() {
    var gooddata = $('#grid').jqGrid('getRowData');
    var flag = 0;
    var hasuser = 0;
    var hasuser1 = 0;
    var indexArr = [];
    // console.log(gooddata);
    gooddata.forEach(function (self, index) {
      //console.log(self);
      if (self['income_type_id'] != null) {
        hasuser = hasuser + 1;
        if (self['jine'] == null || self['jine'] == "") {
          flag = 1;
          indexArr.push(index);
        } else {
          hasuser1 = hasuser1 + 1;
        }
      }
    });
    if (hasuser == 0) {
      layer.msg("请选择支出类别");
      $("#grid").editCell(1, 1, true);
      return false;
    }

    if (flag == 1) {
      layer.msg("请填写金额");
      $("#grid").editCell(indexArr[0] + 1, 2, true);
      return false;
    }

    if (hasuser != hasuser1) {
      layer.msg("请填写完整收入类别和金额");
      return false;
    }

    var user_id = $("#user_id").val();//客户ID
    if (user_id == "") {
      layer.msg("请选择供应商");
      return false;
    }

    var dj_time = $("#dj_time").val();//单据日期
    var sn = $("#number").html();//单据号
    var mark = $("#note").val();//备注
    var jine = $("#jine").val();//金额
    var now_jine = $("#now_jine").val();//本次收款
    var qk_jine = $("#qk_jine").val();//本次欠款
    //return false;
    $.ajax({
      type: 'POST',
      url: "save.html",
      data: { user_id: user_id, sn: sn, mark: mark, gooddata: gooddata, dj_time: dj_time, qk_jine: qk_jine, now_jine: now_jine, jine: jine },
      dataType: "json",
      async: false,
      error: function (request) {
        layer.msg("发送请求失败！");
      },
      success: function (data) {
        if (data.status == 1) {
          layer.msg(data.msg);
        } else {
          layer.msg(data.msg);
        }

      }
    });

  }
  $(".wrapper").on("click", "#save", function (e) {
    save_jqgrid(edit_row, edit_col, grid, function (res) {
      layer.msg("保存成功");
    });
  })

  $('#shenhe').click(function () {
    $.ajax({
      url: '{:url("shenhe")}?id={$info.id}&type=1',
      beforeSend: function () {
        load = layer.load(1);
      },
      success: function (data) {
        if (data.status == 1) {
          layer.msg(data.msg, { time: 1000 });
          window.location.reload();

        } else {
          layer.msg(data.msg, { time: 1000 });
        }
      }

    }).always(function () {
      layer.close(load);
    });
  });
</script>
{include file="admin@public/footer" /}